<template>
	<div class="xiang-ye">
		<div class="header">
			<span class="title"> {{ $t("base.n1-name") }} </span>
			<div class="list">
				<div class="list-item" v-for="(item, index) in list" :key="index">
					<div class="video-box" @click="handlePlayVideo(item)">
						<el-image class="in" :src="item.img + '?imageMogr2/thumbnail/375x'" fit="cover" />
						<IEpVideoPlay color="#fff" />
					</div>
					<span>{{ item.label }}</span>
				</div>
				<span @click="pageJump('/xiang-ye/detail', { categoryIndex: 0, key: 'GaiKuang' })" class="more" style="color: #ffffff">{{ $t("index.more") }}</span>
			</div>
		</div>
		<div class="body">
			<div class="left">
				<div class="title-box">
					<span class="title">{{ $t("index.xy.title") }}</span>
				</div>
				<span class="content">{{ content }}</span>
				<!-- <div class="footer">
					<div class="footer-item" v-for="(item, index) in list2" :key="index">
						<el-image :src="item.icon" fit="cover" />
						<span>{{ item.label }}</span>
					</div>
				</div> -->
			</div>
			<div class="right">
				<swiper @slide-change="swiperChange" :modules="[Navigation]" :navigation="{ nextEl: '.a-left', prevEl: '.a-right' } as any" :loop="true">
					<swiper-slide class="swiper-item" v-for="(item, index) in videoList" :key="index">
						<div class="video-box" @click="playVideo(index)">
							<video ref="videoRef" class="video" :src="item.url" :poster="item.img"></video>
							<IEpVideoPlay v-if="videoPause" color="#fff" />
						</div>
						<IEpArrowLeftBold class="arrow a-left" />
						<IEpArrowRightBold class="arrow a-right" />
						<span v-if="videoPause"> {{ item.name }} </span>
					</swiper-slide>
				</swiper>
				<!-- <el-image src="/src/assets/images/banner.jpg" fit="cover" /> -->
			</div>
		</div>
		<span class="more" @click="pageJump('/xiang-ye/detail')">{{ $t("index.more") }}</span>
	</div>
</template>
<script setup lang="ts">
import { useBaseStore } from "@/store/base";
import { Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/navigation";
import { PVideo } from "@/components/interface";
import { useI18n } from "vue-i18n";
import { useVR } from "@/hook/useVR";
const { cosPrefix } = useBaseStore();

const { pageJump } = useVR();

const i18n = useI18n();

const videoRef = ref();
const videoPause = ref(true);

const swiperChange = (s: any) => {
	playVideo(s.activeIndex);
};
const playVideo = (index: number) => {
	if (videoRef.value[index].paused) {
		videoRef.value[index].play();
	} else {
		videoRef.value[index].pause();
	}
	videoPause.value = videoRef.value[index].paused;
};
const videoList = computed(() => [
	// { name: "喜讯！重庆荆竹村入选联合国世界旅游组织“最佳旅游乡村”", url: cosPrefix + "/xiangye/v2.mp4", img: cosPrefix + "xiangye/img2.jpg" },
	{
		name: i18n.t("index.xy.video-name"),
		url: cosPrefix + "three-level/xiangye/xiangyefeng/zuijialvyou/shipinbaodao/1.mp4",
		img: cosPrefix + "three-level/xiangye/xiangyefeng/zuijialvyou/shipinbaodao/1.png"
	}
	// { name: "UNWTO最佳旅游乡村——荆竹村文化活动", url: cosPrefix + "/xiangye/v1.mp4" }
]);
const list = computed(() => [
	{
		label: i18n.t("index.xy.v1-name"),
		img: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/1.png",
		video: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/1.mp4"
	},
	{
		label: i18n.t("index.xy.v2-name"),
		img: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/2.png",
		video: cosPrefix + "three-level/xiangye/xiangyefeng/jingzhumeijing/2.mp4"
	},
	{
		label: i18n.t("index.xy.v3-name"),
		img: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/1.png",
		video: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/1.mp4"
	},
	{
		label: i18n.t("index.xy.v4-name"),
		img: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/3.png",
		video: cosPrefix + "three-level/xiangye/xiangyefeng/zhoubianjingdian/3.mp4"
	}
	// { label: "露营基地", img: cosPrefix + "xiangye/img4.jpg", video: cosPrefix + "/video/xiangye/V5.mp4" }
]);

// const list2 = [
// 	{ label: "飞机", icon: cosPrefix + "/xiangye/i1.png" },
// 	{ label: "高铁", icon: cosPrefix + "/xiangye/i2.png" },
// 	{ label: "自驾游", icon: cosPrefix + "/xiangye/i3.png" },
// 	{ label: "旅行社", icon: cosPrefix + "/xiangye/i4.png" },
// 	{ label: "入境指南", icon: cosPrefix + "/xiangye/i5.png" },
// 	{ label: "旅游线路", icon: cosPrefix + "/xiangye/i6.png" }
// ] as any[];

const content = computed(() => i18n.t("index.xy.content"));

const playPreviewVideo = inject("playVideo") as (res: PVideo) => void;
const handlePlayVideo = (video: any) => {
	playPreviewVideo({ title: video.label, src: video.video });
};
</script>
<style lang="scss" scoped>
.xiang-ye {
	position: relative;
	&::after {
		position: absolute;
		right: 0;
		bottom: -1050px;
		z-index: 1;
		width: 100%;
		height: 1554px;

		// div是你需要添加背景图片的盒子
		content: "";
		background-image: url("https://sms-1302634640.file.myqcloud.com/cloud-jingzhu/bg1.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		opacity: 0.1;
	}
}
.header {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 524px;
	padding: 27px 0;
	background-image: url("https://sms-1302634640.file.myqcloud.com/cloud-jingzhu/xiangye/bg.png");
	background-size: cover;
	.title {
		font-size: 36px;
		font-weight: bold;
		color: rgb(255 255 255 / 100%);
		text-align: center;
	}
	.list {
		display: flex;
		padding-top: 28px;
		.list-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 25px;
			color: #ffffff;
			&:last-child {
				margin-right: 0;
			}
			.el-image {
				width: 236px;
				height: 316px;
				border-radius: 10px;
			}
			> span {
				margin-top: 20px;
				font-size: 20px;
			}
		}
	}
}
.body {
	position: relative;
	z-index: 9;
	display: flex;
	padding: 40px 320px;
	padding-bottom: 20px;

	// background-color: #fff;
	.left {
		position: relative;
		display: flex;
		flex: 1;
		flex-direction: column;
		height: 400px;
		padding: 40px;
		line-height: 2em;
		color: #333333;
		background-color: rgb(249 249 249 / 100%);
		.title-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-family: SourceSerif;
			color: $theme-color;
			.title {
				display: flex;
				flex-direction: column;
				font-size: 24px;
				font-weight: bold;
				&::after {
					width: 160px;
					height: 4px;
					margin-top: 8px;
					content: "";
					background-color: $theme-color;
				}
			}
		}
		.content {
			margin-top: 20px;
			font-family: SourceSerif;
			font-size: 18px;
			color: rgb(51 51 51 / 100%);
		}
	}
	.right {
		width: 640px;
		height: 400px;
	}
}
.footer {
	display: flex;
	justify-content: center;
	margin-top: 16px;
	.footer-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 40px;
		font-size: 18px;
		color: $theme-color;
		&:last-child {
			margin-right: 0;
		}
		.el-image {
			width: 54px;
			height: 54px;
			margin-bottom: 10px;
		}
	}
}
.swiper {
	height: 100%;
	.swiper-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 400px;
		.video-box {
			width: 100%;
			height: 100%;
		}
		.arrow {
			position: absolute;
			top: 40%;
			left: 30px;
			padding: 4px;
			font-size: 40px;
			color: #ffffff;
			background-color: rgb(255 255 255 / 22.6%);
			border-radius: 50%;
			&.a-right {
				right: 30px;
				left: auto;
			}
		}
		span {
			position: absolute;
			bottom: 15px;
			margin-top: 12px;
			font-family: SourceSerif;
			font-size: 20px;
			color: #ffffff;
		}
	}
}

@media all and (max-width: 750px) {
	.xiang-ye {
		.header {
			height: auto;
			.title {
				font-size: 28px;
			}
			.list {
				flex-wrap: wrap;
				padding: 16px;
				.list-item {
					width: 47.5%;
					margin-right: 5%;
					margin-bottom: 20px;
					&:nth-child(2n) {
						margin-right: 0;
					}
					.el-image {
						height: 200px;
						border-radius: 10px;
					}
				}
			}
		}
		.body {
			flex-direction: column;
			padding: 16px;
			.left {
				height: auto;
				padding: 16px;
				.title {
					font-size: 20px;
				}
				.content {
					font-size: 14px;
				}
			}
			.right {
				position: relative;
				width: 100%;
				height: auto;
				.video-box {
					height: auto;
					background-color: #000000;
					video {
						object-fit: contain;
					}
				}
				.swiper-item {
					height: auto;
				}
				.swiper-item span {
					font-size: 14px !important;
					text-indent: 2rem;
				}
			}
			.footer {
				.footer-item {
					flex: 1;
					margin-right: 0;
					font-size: 16px;
					.el-image {
						width: 30px;
						height: 30px;
						margin-bottom: 10px;
					}
				}
			}
		}
	}
}
</style>
